const Index = {
    // 存储数据用的对象
    data : {
        btnHome : document.querySelector("#btnHome"),
        searchWord : document.querySelector("#searchWord"),
        loading : document.querySelector("#loading"),
        htmlCard : "",
    },
    // 用来存储函数的对象
    func : {
        init : function(){
            // 加载数据
            window.onload = function(){
                // console.log("页面加载完成");
                setTimeout(function(){
                    loading.style.display = "none";
                    console.log("页面加载完成");
                }, 3000);
            }
            document.onreadystatechange = function(){
                if(document.readyState == "complete"){
                    setTimeout(function(){
                        loading.style.display = "none";
                        console.log("加载完成");
                    }, 3000);
                }
                else{
                    loading.style.display = "block";
                }
            }

            // 初始化社区数据
            Index.func.getCommunity();
        },
        clickHome : function(){
            console.log("btnHome 标签被点击");
        },
        changeSearchWord : function(){
            console.log("searchWord 标签被点击" + searchWord.value);
        },
        // 接收社区数据
        getCommunity : function(){
            // 直接用的 json 文件的话，是不用再说明 method, mode, credentials 的(不过使用 php 文件产生的 json 数据是有问题的，展示不出来的)
            // error：Uncaught (in promise) SyntaxError: Unexpected token '<', "<?php 是一直在报错的
            // fetch('./community.php')
            // fetch('./community.php', {
            //     method: "GET",
            //     mode: "cors", // 允许发送跨域请求
            //     credentials: "include"
            // })

            fetch('./community.json')
            .then(response =>{
                return response.json();
            })
            .then(jsonData =>{
                // 函数的方式调用
                // updataHtmlCard(jsonData);

                // 函数直接展开
                // htmlCard 是一个数据变量，就直接放在上面的数据区域里面去声明了哦 
                Index.data.htmlCard = `
                    <p class="card-text">${jsonData.username}</p>
                    <p class="card-text">${jsonData.prief}</p>
                `;
                const community = document.querySelector("#community");
                community.innerHTML = Index.data.htmlCard; 
                // community.innerHTML = "<p>hehe</p>";

                console.log(jsonData);
            });
        },
        updataHtmlCard : function(jsonData){
            // htmlCard 是一个数据变量，就直接放在上面的数据区域里面去声明了哦 
            Index.data.htmlCard = `
                <p class="card-text">${jsonData.username}</p>
                <p class="card-text">${jsonData.prief}</p>
            `;
            const community = document.querySelector("#community");
            // community.innerHTML = Index.data.htmlCard; 
            community.innerHTML = "<p>hehe</p>";

            console.log(jsonData);
        },
    }
}